/**
 * Copyright (c) Microsoft Corporation. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { test, expect } from '@playwright/experimental-ct-react';
import type { ImageDiff } from './imageDiffView';
import { ImageDiffView } from './imageDiffView';

test.use({ viewport: { width: 1000, height: 800 } });

const expectedPng = '';
const actualPng = '';

const actualAttachment = { name: 'screenshot-actual.png', path: actualPng, contentType: 'image/png', };
const expectedAttachment = { name: 'screenshot-expected.png', path: expectedPng, contentType: 'image/png', };
const diffAttachment = { name: 'screenshot-diff.png', path: expectedPng, contentType: 'image/png', };

const imageDiff: ImageDiff = {
  name: 'log in',
  actual: { attachment: actualAttachment },
  expected: { attachment: expectedAttachment, title: 'Expected' },
  diff: { attachment: diffAttachment },
};

test('should render links', async ({ mount }) => {
  const component = await mount(<ImageDiffView key='image-diff' diff={imageDiff}></ImageDiffView>);
  await expect(component.locator('a')).toHaveText([
    'screenshot-diff.png',
    'screenshot-actual.png',
    'screenshot-expected.png',
  ]);
});

test('should show diff by default', async ({ mount }) => {
  const component = await mount(<ImageDiffView key='image-diff' diff={imageDiff}></ImageDiffView>);

  const image = component.locator('img');
  const box = await image.boundingBox();
  expect(box).toEqual(expect.objectContaining({ width: 48, height: 48 }));
});
